<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="../../lib/jquery-3.4.1.min.js"></script>
    <script src="../../lib/jquery-migrate-1.2.1.min.js"></script>

    <link rel="stylesheet" href="/assets/bootstrap.min.css"/>
    <link href="/assets/font-awesome.min.css" rel="stylesheet">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

    <link rel="stylesheet" href="../../dist/drawerJs.css"/>
    <script src="../../dist/drawerJs.standalone.js"></script>
</head>

<body>
<div class="container" style="margin: 40px; padding: 0; position: relative;">
    <div id="canvas-editor">
    </div>
</div>

<script>
    var localization_ru =  {
        'Add Drawer': 'Добавить холст для рисования',
        'Insert Drawer': 'Добавить холст',
        'Insert': 'Добавить',
        'Free drawing mode': 'Карандаш',
        'SimpleWhiteEraser': 'Ластик (белый)',
        'Eraser': 'Ластик',
        'Delete this canvas': 'Удалить полотно',
        'Are you sure want to delete this canvas?': 'Вы уверены что хотите удалить полотно?',


        // canvas properties popup
        'Size (px)': 'Размер (px)',
        'Position': 'Позиция',
        'Inline': 'На линии',
        'Left': 'Слева',
        'Center': 'По центру',
        'Right': 'Справа',
        'Floating': 'Плавающий',
        'Canvas properties': 'Свойства холста',
        'Background': 'Фон',
        'transparent': 'прозрачный',
        'Cancel': 'Отмена',
        'Save': 'Сохранить',

        // Fullscreen plugin
        'Enter fullscreen mode': 'Полноэкранный режим',
        'Exit fullscreen mode': 'Выйти из полноэкранного режима',

        // shape context menu plugin
        'Bring forward': 'Переместить выше',
        'Send backwards': 'Переместить ниже',
        'Bring to front': 'Переместить наверх',
        'Send to back': 'Переместить в низ',
        'Duplicate': 'Клонировать',
        'Remove': 'Удалить',

        // brush size plugin
        'Size:': 'Размер:',

        // color plugin
        'Fill:': 'Заливка:',
        'Transparent': 'Прозрачный',
        'None': 'Нет',

        // shape border plugin
        'Border:': 'Граница:',

        // arrow plugin
        'Draw an arrow': 'Стрелка',
        'Draw a two-sided arrow': 'Двухсторонняя стрелка',
        'Lines and arrows': 'Линии и стрелки',

        // circle plugin
        'Draw a circle': 'Круг',

        // line plugin
        'Draw a line': 'Линия',

        // rectangle plugin
        'Draw a rectangle': 'Прямоугольник',

        // triangle plugin
        'Draw a triangle': 'Треугольник',

        // polygon plugin
        'Draw a Polygon': 'Многоугольник',
        'Stop drawing a polygon': 'Закончить рисование многоугольника (esc)',
        'Click to start a new line': 'Кликните для начала новой линии',

        // text plugin
        'Draw a text': 'Текст',
        'Click to place a text': 'Нажмите, чтобы расположить текст',
        'Font:': 'Шрифт:',

        // movable floating mode plugin
        'Move canvas': 'Подвинуть холст',

        // base shape
        'Click to start drawing a ': 'Нажмите, чтобы начать рисовать ',

        // image tool
        'Insert an image'          : 'Вставить изображение',
        'No file was selected!'    : 'Не был выбран файл!',
        'Incorrect file type'      : 'Неверный тип файла!',
        'File is to big!. Maximum file size is '   : 'Файл слишком большой! Максимальный размер файла - ',
        'Image failed to create!'  : 'Не удалось создать изображение!',

        // background image tool
        'Insert a background image': 'Фоновое изображение'
    };

    $(document).ready(function () {
        var drawerPlugins = [
            // Drawing tools
            'Pencil',
            'Eraser',
            'Text',
            'Line',
            'ArrowOneSide',
            'ArrowTwoSide',
            'Triangle',
            'Rectangle',
            'Circle',
            'Image',
            'BackgroundImage',
            'Polygon',

            // Drawing options
            //'ColorHtml5',
            'Color',
            'ShapeBorder',
            'BrushSize',
            'OpacityOption',
            'LineWidth',
            'StrokeWidth',

            'Resize',
            'ShapeContextMenu',
            'CloseButton',
            'OvercanvasPopup',
            'OpenPopupButton',
            'MinimizeButton',
            'ToggleVisibilityButton',
            'MovableFloatingMode',

            'TextLineHeight',
            'TextAlign',

            'TextFontFamily',
            'TextFontSize',
            'TextFontWeight',
            'TextFontStyle',
            'TextDecoration',
            'TextColor',
            'TextBackgroundColor'
        ];

        // drawer is created as global property solely for debug purposes.
        // doing  in production is considered as bad practice
        window.drawer = new DrawerJs.Drawer(null, {
            plugins: drawerPlugins,
            pluginsConfig: {
				Image: {
					scaleDownLargeImage: true,
					maxImageSizeKb: 1024 //1MB
				},
				BackgroundImage: {
				    scaleDownLargeImage: true,
					maxImageSizeKb: 1024, //1MB
					//fixedBackgroundUrl: '/examples/redactor/images/vanGogh.jpg',
					imagePosition: 'stretch',  // one of  'center', 'stretch', 'top-left', 'top-right', 'bottom-left', 'bottom-right'
		        	acceptedMIMETypes: ['image/jpeg', 'image/png', 'image/gif'] ,
                    dynamicRepositionImage: true,
                    dynamicRepositionImageThrottle: 100
				},
                Text : {
                    editIconMode : true,
                    editIconSize : 'large'
                }
			},
            defaultImageUrl: '/examples/redactor/images/drawer.jpg',
            defaultActivePlugin : { name : 'Pencil', mode : 'lastUsed'},
            debug: true,
			transparentBackground: true,
            align: 'floating',  //one of 'left', 'right', 'center', 'inline', 'floating'
			lineAngleTooltip: { enabled: true, color: 'blue',  fontSize: 15}
        });

        $('#canvas-editor').append(window.drawer.getHtml());
        window.drawer.onInsert();
    });
</script>
</body>
</html>
